<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-10 05:54:29
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-11 08:46:34
-->
<template>
  <div :class="$style.titleTest">todo</div>
  <button @click="backToDash">back to dash</button>
</template>

<script>
import { reactive, toRefs, watch } from "vue";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";

export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    // 获取路由器的实例
    const router = useRouter();
    // route是响应式对象，可监控变化
    const route = useRoute();
    watch(
      () => route.path,
      (to, from) => {
        console.log(to, from);
      }
    );
    watch(
      () => route.query,
      query => {
        console.log(query);
      }
    );

    // 路由守卫
    onBeforeRouteLeave(() =>
      // to, from
      {
        const answer = window.confirm("你确定离开吗");
        if (!answer) {
          return false;
        }
      }
    );
    return {
      ...toRefs(state),
      backToDash() {
        router.go(-1);
      },
    };
  },
};
</script>

<style module>
.title-test {
  color: red;
  font-size: 20px;
}
</style>
